<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="登录账户管理"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<free-divider></free-divider>

			<view class="pl-2 pr-2 py-3">
				<view class="dfex border-bottom mt-2 pb-3" v-for="(item,index) in list">
					<view class="lineHight-2">
						<view class="dfes">
							<view class="font-14">{{item.username}}</view>
							<view v-if="!item.parentId || item.parentId === ''"
								class="bg-FFC251 pl-1 pr-1 lineHight ml-2 rounded font-12 text-white">主账号</view>
							<view v-else class="bg-FFC251 pl-1 pr-1 lineHight ml-2 rounded font-12 text-white">子账号
							</view>

						</view>
						<view class="font-12 text-A0A0A0">{{item.phone}}</view>
					</view>
					<view class="dfes">
						<view class="mr-4  font-24 iconfont icon-xiugai" @click="open('tabbar/user/userName', item.id)">
						</view>
						<view class=" font-24 iconfont icon-shanchu" @click="deleteMy(item.id)"></view>
					</view>
				</view>
				<view v-if="!hasMore && list.length > 0" class="text-center mt-3 mb-3">
					<view class="text-muted">没有更多数据了</view>
				</view>
				<view v-else-if="!hasMore && list.length === 0" class="text-center mt-3 mb-3">
					<view class="text-muted">暂无数据</view>
				</view>
				<view v-else class="text-center mt-3 mb-3">
					<view class="btn btn-primary">加载更多</view>
				</view>
			</view>

			<ferrButton title="新增账号" @click="addAnAccount"></ferrButton>
			<!-- 修改名字|修改微信号 弹框-->
			<free-confirm ref="confirm" title="新增账号">
				<u-form :model="form">
					<u-form-item :label-style="labelStyle" label="登录账号" prop="name">
						<u-input class="mr-3 " v-model="add.username" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="登录密码" prop="name">
						<u-input class="mr-3 " v-model="add.password" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="绑定手机号" prop="name">
						<u-input class="mr-3 " v-model="add.phone" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="验证码" prop="name">
						<u-input class="mr-3 " v-model="add.phoneCaptcha" input-align="right" />
						<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
					</u-form-item>
				</u-form>
			</free-confirm>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeAvater from "@/components/free-ui/free-avater.vue";
	import freeDivider from "@/components/free-ui/free-divider.vue";
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	export default {
		components: {
			freeAvater,
			freeDivider,
			freeConfirm,
			ferrButton
		},
		data() {
			return {
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				list: [],
				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				codeText: '',
				mobile: '', // 手机号
				code: '', // 验证码
				seconds: 60,
				add: {
					username: '',
					password: '',
					phone: '',
					phoneCaptcha: ''
				}

			}
		},
		onLoad() {
			this.NewList()
		},
		computed: {

		},
		methods: {
			// 账号列表
			NewList() {
				$H.post('/brand/user/agriculture/addUserList', {
					...this.form
				}, {}).then(res => {
					this.list = res.result.records
					this.form.total = res.result.total;
					this.hasMore = this.list.length < this.form.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.list = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			// 删除账号
			deleteMy(id) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.del(
								`/brand/user/agriculture/addUserDelete?id=${id}`, {}, {
									token: true
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.NewList()
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},

			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.getCodeisWaiting) {
					return;
				}

				// 隐藏键盘
				uni.hideKeyboard();
				this.getCodeText = "发送中...";
				this.getCodeisWaiting = true;
				let o = {
					phone: this.add.phone
				};

				// 发送请求获取验证码
				$H.post('/brand/user/agriculture/agricultureAddUserSendSms', o, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					})
					.then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: '正在获取验证码'
							});
							setTimeout(() => {
								uni.hideLoading();
								this.$refs.uCode.start();
							}, 2000);
						} else {
							this.$u.toast('倒计时结束后再发送');
						}
					})
					.catch(error => {
						uni.showToast({
							title: "网络错误，请稍后再试",
							icon: 'none'
						});
					});
			},
			end() {
				this.$u.toast('倒计时结束');
				this.getCodeisWaiting = false;
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			addAnPhone() {
				let o = {
					...this.add,
				};
				$H.post('/brand/user/agriculture/addUser', o, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					})
					.then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
							this.NewList()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					})
					.catch(error => {
						uni.showToast({
							title: "网络错误，请稍后再试",
							icon: 'none'
						});
					});
			},
			addAnAccount() {
				this.$refs.confirm.show((close) => {
					
					this.addAnPhone()
					close();
				});
			},
			open(path, id) {
				uni.navigateTo({
					url: '/pages/' + path + '?id=' + id
				})
			},

		}
	}
</script>

<style>
</style>